<script setup>
import { ref,watch } from 'vue'
import request from '../../../utils/request';
import { ElMessage, ElMessageBox } from 'element-plus'
const pageNum = ref(1);
const pageSize = ref(8);
const total = ref(0);
const labId = ref('');
// 定义响应式数据
const user = ref(JSON.parse(localStorage.getItem('happyuser') || '{}'));
const typeData = ref([]);
const fromVisible = ref(false);
let form = ref({}); 
const load = () => { 
// 分页查询
 request.get('/lab/selectByPage', {
        params: {
          pageNum: pageNum.value,
          pageSize: pageSize.value,
          labId: labId.value,
        }
      }).then((res) => {
        typeData.value = res.data.data.records;
        total.value = res.data.data.total;
        console.log( res.data);
      })
}
load()
watch(labId, (newValue, oldValue) => {
  console.log('searchValue changed', newValue, oldValue);
  if (! labId.value) {
    load();
  } 
});
const handleAdd = (item) => {
  if(item.value != {}) {
    form.value = item
  }
  // form.value = {}; // 清空数据
  fromVisible.value = true; // 打开弹窗
};

const save = () => {
   request({
    url: form.value.id ? '/lab/updateLab' : '/lab/addLab',
    method: form.value.id ? 'put' : 'post', // 根据id是否存在来判断是put还是post
    data: form.value
   }).then((res) => {
    
    if(res.data.code == 200){
      ElMessage({
      message: '操作成功',
      type: 'success',
     })
      
      load();
      fromVisible.value = false
    }else{
      console.log(form.value)
      ElMessage.error(res.data.msg)
    } 
})
};
const handleDelete = (id) => {

  ElMessageBox.confirm('是否删除该条数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // tableData.value.splice(index, 1); // 删除指定索引的数据
    request.delete('/lab/delete/'+id).then((res) => {
        if(res.data.code == 200){
          ElMessage.success('操作成功')
          load();
        }else{
          ElMessage.error(res.msg)
        }
    })
    ElMessage({
      type: 'success',
      message: '删除成功!'
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    });
  });
};

</script>

<template>
    <div class="main">
      <div class="search">
        <el-input placeholder="请输入实验室编号" style="width: 200px; margin-left: 5px" v-model="labId"></el-input>
        <el-button type="primary" plain style="margin-left: 10px" @click="load">
          <el-icon style="margin-right: 3px;"><Search /></el-icon>查询</el-button>
        <el-button type="success" plain style="margin-left: 10px" @click="handleAdd({})">
          <el-icon style="margin-right: 3px;"><CirclePlus /></el-icon>新增
        </el-button>
      </div>
      <div class="table">
        <div class="card">
          <el-row :gutter="20">
            <el-col :span="6" v-for="item in typeData" :key="item.id">
              <el-card style="background-color: #ecf7fc" class="card ">
                <div style="color: #474849">
                   <el-text class="w-150px mb-2" truncated>
                     实验室编号：
                     <span style="font-size: 16px; font-weight: 550; color: #0376bf">{{ item.labId}}</span>
                   </el-text>
                  
                </div>
                <div style="color: #474849; margin-top: 10px">
                   <el-text class="w-150px mb-2" truncated>
                    名称：{{ item.labName }}
                   </el-text>         
                </div>
                <div style="color: #474849; margin-top: 5px">
                  <el-text class="w-150px mb-2" truncated>
                     状态：
                     <span style="font-weight: 550; color: #3c9e25" v-if="item.status == 0"> 空闲中 </span>
                     <span style="font-weight: 550; color: #ea8282" v-else> 占用 </span>
                   </el-text>   
                </div>
                <div style="color: #474849; margin-top: 10px">
                  <el-text class="w-150px mb-2" truncated>
                    开放时间：{{ item.start }} - {{ item.end }}
                   </el-text> 
                </div>
                <div style="margin-top: 15px">
                  <el-row :gutter="10">
                    <el-col :span="6">
                      <el-button color="#626aef" size="mini">预约</el-button>
                    </el-col>
                    <el-col :span="6">
                      <el-button type="primary" size="mini" @click="handleAdd(item)">编辑</el-button>
                    </el-col>
                    <el-col :span="6">
                    
                    </el-col>
                    <el-col :span="6">
                      <el-button type="danger" size="mini" @click="handleDelete(item.uid) ">删除</el-button>
                    </el-col>
                  </el-row>
                  </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div class="pagination">
          <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[5,8,10,20]"
          layout="sizes, prev, pager, next,total,jumper"
          :total="total"
          @size-change="load"
          @current-change="load"
      >
      </el-pagination>
          
        </div>
      </div>
      <!-- v-model:visible -->
    <el-dialog title="实验室" v-model="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
      <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
        <el-form-item label="实验室编号" prop="labId">
          <el-input v-model="form.labId" placeholder="实验室编号"></el-input>
        </el-form-item>
        <el-form-item label="实验室名" prop="labName">
          <el-input v-model="form.labName" placeholder="实验室名"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" placeholder="地址"></el-input>
        </el-form-item>
        <el-form-item label="可容纳人数" prop="capacity">
          <el-input v-model="form.capacity" placeholder="可容纳人数"></el-input>
        </el-form-item>
        <el-form-item prop="start" label="开始时间">
          <el-time-picker style="width: 100%"
              v-model="form.start"
              value-format="HH:mm:ss"
              placeholder="请选择时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item prop="start" label="结束时间">
          <el-time-picker style="width: 100%"
              v-model="form.end"
              value-format="HH:mm:ss"
              placeholder="请选择时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="实验室简介" prop="textarea">
          <el-input
             v-model="form.func"
             style="width: 440px"
             :rows="4"
             type="textarea"
             placeholder="Please input"
      />
        </el-form-item>
      </el-form>

      <template v-slot:footer>
        <div  class="dialog-footer">
          <el-button @click="fromVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    </div>
  </template>
  <style>
  .main{
    background: linear-gradient(to top,white 0%,white 15%,#DCDCDC 85%,#DCDCDC 100%);
  }
  .search{
    padding: 30px 0px 0px 20px;
  }
  .table{
    padding: 20px;
  }
  .card{
    margin-bottom: 15px;
    border-radius: 10px;
    
  }
</style>